<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入vue所需资源文件 -->
		<script src="js/vue.js"></script>
		<!-- 引入样式 -->
		<link rel="stylesheet" href="css/element/index.css">
		<!-- 引入组件库 -->
		<script src="js/element/index.js"></script>
		<script src="js/axios.min.js"></script>
		<script src="js/qs.min.js"></script>
		<style>
			body {
				background-color: #C2E7B0;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<el-form :model="userBean" :rules="rules" status-icon label-width="100px" class="demo-ruleForm"
				style="margin-top: 200px;">
				<el-row>
					<el-col :span="12" :offset="6">
						<el-form-item prop="username">
							<el-input prefix-icon="el-icon-user-solid" type="text" v-model="userBean.username"
								autocomplete="off"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="12" :offset="6">
						<el-form-item prop="userpwd">
							<el-input prefix-icon="el-icon-s-goods" type="password" v-model="userBean.userpwd"
								autocomplete="off"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="12" :offset="8">
						<el-form-item>
							<el-button type="primary" @click="login()">登录</el-button>
							<el-button @click="resetForm('userBean')">重置</el-button>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</div>
	</body>
	<script>
		var app = new Vue({
			el: "#app",
			data: {
				userBean: {
					username: "",
					userpwd: ""
				},
				rules: {
					username: [{
						required: true,
						message: '请输入用户名',
						trigger: 'blur'
					}],
					userpwd: [{
						required: true,
						message: '请输入密码',
						trigger: 'blur'
					}]
				}
			},
			methods: {
				login: function() {
					// Qs.stringify将js对象进行序列化处理，以key、value进行拼接
					var params = Qs.stringify(this.userBean)
					axios.post('http://localhost:8086/login', params)
						.then(function(response) {
							// 根据服务器的响应进行判断，返回ok则跳转到登录成功的页面
							if (response.data == "ok") {
								window.location.href = "welcome.html"
							} else {
								// 反之返回登录页
								window.location.href = "index.html"
							}
						})
						.catch(function(error) {
							console.log(error);
						});

				},
				resetForm(formName) {
					this.$refs[formName].resetFields();
				}

			}
		})
	</script>
</html>
